<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入
* Turf (https://github.com/Turfjs/turf/)
*********************************************************************-->
<!DOCTYPE html>
<html style="width: 100%; height: 100%">
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_image_service"></title>
        <style>
            .sidebar-config-wrap {
                position: absolute;
                top: 0;
                right: 0;
                height: 100vh;
                width: 500px;
                padding: 20px;
                background: #fff;
                font-family: Avenir, Helvetica, Arial, sans-serif;
                box-shadow: -2px 0 8px rgb(0 0 0 / 15%);
            }

            .sidebar-config-wrap .panel-group .panel {
                border-color: transparent;
                background: transparent;
                color: rgba(0, 0, 0, 0.85);
            }

            .sidebar-config-wrap .panel .panel-heading {
                background: #fafafa;
                color: rgba(0, 0, 0, 0.85);
                border-color: #e8e8e8 !important;
                position: relative;
            }

            .sidebar-config-wrap .panel .panel-heading::before {
                content: '';
                height: 100%;
                width: 2px;
                background: #3394dc;
                position: absolute;
                top: 0;
                left: 0;
                display: block;
            }

            .form-group {
                overflow: hidden;
            }

            .sidebar-config-wrap .form-group label {
                margin-bottom: 0;
                line-height: 34px;
            }
            .sidebar-config-wrap .button-group {
                margin: 0 auto;
                margin-top: 20px;
                text-align: center;
            }
            .sidebar-config-wrap .button-group button {
                width: 30%;
                outline: none;
            }
            .sidebar-config-wrap .btn-search {
                width: 100%;
                outline: none;
                height: 32px;
                padding: 0 15px;
                font-size: 14px;
                border-radius: 4px;
                color: rgba(0, 0, 0, 0.65);
                border-color: #d9d9d9;
                background-color: rgb(255, 255, 255);
            }
            .sidebar-config-wrap .btn-search:hover,
            .sidebar-config-wrap .btn-search:active,
            .sidebar-config-wrap .btn-search:focus {
                color: #40a9ff;
                border-color: #40a9ff;
                background-color: rgb(255, 255, 255);
                box-shadow: none;
            }

            .sidebar-config-wrap button:focus {
                outline: none !important;
            }

            .sidebar-config-wrap .panel-title a {
                width: 100%;
                display: block;
                text-decoration: none !important;
                overflow: hidden;
            }

            .sidebar-config-wrap .panel-title a span.glyphicon {
                float: right;
            }

            .sidebar-config-wrap .panel-title a[aria-expanded='true'] .glyphicon-chevron-down {
                display: none;
            }

            .sidebar-config-wrap .panel-title a[aria-expanded='false'] .glyphicon-chevron-up {
                display: none;
            }
            .table-bordered > thead > tr {
                border-bottom: none !important;
            }
            .table-bordered > thead > tr > th,
            .table-bordered > tbody > tr > td {
                vertical-align: middle !important;
            }
            .table-bordered > thead > tr > th {
                background: #fafafa;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 500;
                border-color: #e8e8e8 !important;
                padding: 16px !important;
                overflow-wrap: break-word;
            }
            .table-bordered > tbody > tr > td {
                text-align: center;
                color: rgba(0, 0, 0, 0.85);
                font-weight: 500;
                border-color: #e8e8e8 !important;
                padding: 8px !important;
                overflow-wrap: break-word;
            }
            .sidebar-config-wrap .navigation {
                text-align: right !important;
            }
            .sidebar-config-wrap .pagination {
                margin-top: 0;
                box-sizing: content-box;
            }
            .sidebar-config-wrap .pagination > li {
                display: inline-block;
                box-sizing: content-box;
                width: 30px;
                height: 30px;
                margin-right: 8px;
            }
            .sidebar-config-wrap .pagination > li > a,
            .sidebar-config-wrap .pagination > li > span {
                box-sizing: content-box;
                padding: 0 6px;
                width: 18px;
                height: 30px;
                border-radius: 4px;
                line-height: 30px;
                text-align: center;
            }

            .btn.btn-default {
                padding-right: 15px;
            }
            .glyphicon-eye-open {
                color: #1890ff;
                cursor: pointer;
            }
            .glyphicon-eye-closed {
                color: rgba(0, 0, 0, 0.65);
            }
            .modal-dialog {
                width: 1100px !important;
                top: 50px;
            }
            .modal-body {
                border: 1px solid #e8e8e8;
            }
            .modal-body table {
                margin: 0 auto;
                border: 1px solid #e8e8e8;

                border-radius: 4px;
            }
            .modal-content-row {
                border-bottom: 1px solid #e8e8e8;
            }
            .modal-content-item-label {
                background-color: #fafafa;
                color: rgba(0, 0, 0, 0.85);
                font-weight: normal;
                font-size: 14px;
                line-height: 1.5;
            }
            .modal-content-item-label,
            .modal-content-item-content {
                padding: 16px 24px;
                border-right: 1px solid #e8e8e8;
                font-size: 14px;
                line-height: 1.5;
            }
            .modal-content-row .modal-content-item-content:nth-child(2){
                width: 193px;
            }
            .modal-content-row .modal-content-item-content:nth-child(4){
                width: 479px;
            }
        </style>
    </head>

    <body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%">
        <div id="map" style="width: calc(100% - 500px); height: 100%"></div>
        <div class="panel-group sidebar-config-wrap" id="accordion" role="tablist" aria-multiselectable="true">
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a
                            role="button"
                            data-toggle="collapse"
                            data-parent="#accordion"
                            href="#collapseOne"
                            aria-expanded="true"
                            aria-controls="collapseOne"
                        >
                            <span data-i18n="resources.text_query"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="templateName">Collections</label>
                            <div>
                                <select
                                    class="form-control"
                                    id="collections"
                                    style="width: 100%"
                                    onchange="selectCollection()"
                                >
                                    <option value="-1" data-i18n="resources.text_select"></option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="templateName" data-i18n="resources.text_district_search"></label>
                            <div>
                                <select
                                    class="form-control"
                                    id="provinces"
                                    style="width: 100%"
                                    onchange="selectProvince()"
                                >
                                    <option value="-1" data-i18n="resources.text_select"></option>
                                </select>
                            </div>
                        </div>
                        <button
                            class="btn btn-search"
                            id="polygon-search"
                            data-i18n="resources.text_polygon_search"
                            onclick="drawRegion('Polygon')"
                        ></button>
                        <button
                            class="btn btn-search"
                            id="rectangle-search"
                            data-i18n="resources.text_rectangle_search"
                            onclick="drawRegion('Box')"
                        ></button>
                        <div class="button-group">
                            <button
                                class="btn btn-primary"
                                id="query"
                                data-i18n="resources.text_query"
                                onclick="query()"
                            ></button>
                            <button
                                class="btn btn-primary"
                                id="printBtn"
                                data-i18n="resources.text_reset"
                                onclick="clearSearchResult(true)"
                            ></button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="exportOptions">
                    <h4 class="panel-title">
                        <a
                            class="collapsed"
                            role="button"
                            data-toggle="collapse"
                            data-parent="#accordion"
                            href="#collapseTwo"
                            aria-expanded="false"
                            aria-controls="collapseTwo"
                        >
                            <span data-i18n="resources.text_queryResult"></span>
                            <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
                            <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="exportOptions">
                    <div class="panel-body">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th data-i18n="resources.text_filename"></th>
                                    <th data-i18n="resources.text_addTime"></th>
                                    <th data-i18n="resources.text_showImage"></th>
                                </tr>
                            </thead>
                            <tbody id="collectionsTbody"></tbody>
                        </table>
                        <nav class="page" aria-label="Page navigation">
                            <ul id="pagination" class="pagination"></ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
        <!-- 模态框（Modal） -->
        <div
            class="modal fade"
            id="myModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
            aria-hidden="true"
        >
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel"></h4>
                    </div>
                    <div class="modal-body">
                        <table>
                            <tbody id="myModalContent"></tbody>
                        </table>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <script type="text/javascript" include="bootstrap,jquery,widgets" src="../js/include-web.js"></script>
        <script type="text/javascript" include="turf" src="../../dist/ol/include-ol.js"></script>
        <script type="text/javascript">
            widgets.loader.showLoader("data loading...");
            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
            var root = 'https://iserver.supermap.io/iserver/services/imageservice-hainan/restjsr';
            var url = host + '/iserver/services/data-china400/rest/data';
            var projection = 'EPSG:4326';
            var map = new ol.Map({
                target: 'map',
                layers: [
                    new ol.layer.Tile({
                        source: new ol.source.TileSuperMapRest({
                            url: host + '/iserver/services/map-world/rest/maps/World',
                            wrapX: true
                        })
                    })
                ],
                view: new ol.View({
                    projection: projection,
                    center: [110, 19.2],
                    minZoom: 1,
                    zoom: 8.5
                })
            });
            var currentIndex = 0;
            var features = [];
            var pageMax = 10;
            var tableMax = 10;
            var collections = [];
            var provinces = [];
            var collectionId;
            var provinceId = -1;
            var provinceBbox;
            var itemLayers = [];
            var searchBoxLayerID = 'searchBoxLayer';
            var searchRegionLayerID = 'searchRegionLayer';
            var selectedFeature;
            var regionFeature;
            var draw;
            var result = queryFromDataService(url);
            var imageService = ImageService();
            function ImageService() {
                var service = new ol.supermap.ImageService(root);
                service.getCollections(getCollectionsCompleted);
                return service;
            }

            function ImageSearchService(params) {
                imageService.search(params, getSearchProcessCompleted);
            }

            function getCollectionsCompleted(res) {
                var collectionsInfo = res.result || [];
                collections = [];
                collectionsInfo.forEach(function (collection) {
                    var split = collection['extent']['spatial']['crs'].split('/');
                    var EPSGCode = split[split.length - 1];
                    collections.push({
                        id: collection['id'],
                        title: collection['title'] || collection['id'],
                        value: collection['id'],
                        extent: collection['extent']['spatial']['bbox'][0],
                        EPSG: EPSGCode
                    });
                });
                appendOptions('collections', collections, 'id', 'title');
            }

            function getSearchProcessCompleted(res) {
                var result = res.result;
                if (result && result.features) {
                    //id不能重复，否则相同id会被覆盖，显示不正确。重新设置id
                    result.features.forEach(function (feature) {
                        feature.id = feature.collection + '.' + feature.id;
                    });
                }
                console.log('getSearchProcessCompleted', result.features);

                features = (result && result.features) || [];
                showSearchResultBox(result);
                // 填充table
                appendTable(features.slice(0, tableMax));
                // 填充page
                appendPage(features);
                // 展开table
                collapseTable();
                setTimeout(() => {
                    // 显示所有影像
                    features.forEach((feature) => {
                        showSearchItemTile(feature.id, feature.properties.smfilename);
                    });
                }, 2000);
            }

            function showSearchResultBox(searchResult) {
                if (searchResult === undefined) {
                    removeLayer(map, searchBoxLayerID);
                    return;
                }
                if (searchResult) {
                    var readFeatures = new ol.format.GeoJSON().readFeatures(searchResult);
                    if (readFeatures.length > 0) {
                        var center = getPolygonCenter(searchResult.features[0]);
                        addSearchBoxLayer(readFeatures, searchBoxLayerID, center, searchResult.features);
                    } else {
                        removeLayer(map, searchBoxLayerID);
                    }
                }
            }

            function addSearchBoxLayer(features, layerID, center, resultFeatures) {
                removeLayer(map, layerID);
                window.map = map;
                var layer = new ol.layer.Vector({
                    id: layerID,
                    source: new ol.source.Vector({
                        features: features
                    }),
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(0,0,0,0.2)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#ff0000',
                            width: 2
                        })
                    }),
                    zIndex: 100
                });
                map.addLayer(layer);
                bindEvent();
            }

            function bindEvent() {
                map.on('click', function (e) {
                    map.forEachFeatureAtPixel(
                        e.pixel,
                        function (feature) {
                            selectedFeature = feature;
                            $('#myModal').modal('show');
                            showTifInfo(selectedFeature.V);
                            return true;
                        },
                        {
                            layerFilter: function (layer) {
                                return layer.get('id') === searchBoxLayerID;
                            }
                        }
                    );
                });
            }

            function addProvinceLayer(feature, layerID) {
                removeLayer(map, layerID);
                regionFeature = null;
                var readFeatures = new ol.format.GeoJSON().readFeatures(feature);
                var layer = new ol.layer.Vector({
                    id: layerID,
                    source: new ol.source.Vector({
                        features: readFeatures
                    }),
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(0,0,0,0.2)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#33adff',
                            width: 2
                        })
                    }),
                    zIndex: 100
                });
                map.addLayer(layer);
                map.getView().animate({
                    center: getPolygonCenter(feature),
                    zoom: 9
                });
            }

            function drawRegion(measureType) {
                var sketch;
                var helpTooltipElement;
                map.removeInteraction(draw);
                clearOverLayersById(map, 'helpTooltip');
                createHelpTooltip();
                clearSearchRegion();
                clearSearchResult(true);
                var layerID = searchRegionLayerID;
                var vector = getLayerById(layerID);
                var source = vector ? vector.getSource() : new ol.source.Vector();
                if (!vector) {
                    vector = new ol.layer.Vector({
                        id: layerID,
                        source: source,
                        style: new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(0,0,0,0.2)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: '#ffcc33',
                                width: 2
                            }),
                            image: new ol.style.Circle({
                                radius: 7,
                                fill: new ol.style.Fill({
                                    color: '#ffcc33'
                                })
                            })
                        }),
                        zIndex: 16
                    });
                    map.addLayer(vector);
                }
                var pointerMoveHandler = function (evt) {
                    if (evt.dragging) {
                        return;
                    }
                    var helpMsg = '请点击开始绘制';
                    if (sketch) {
                        var geom = sketch.getGeometry();
                        helpMsg = '继续点击绘制多边形';
                    }
                    helpTooltipElement.innerHTML = helpMsg;
                    helpTooltip.setPosition(evt.coordinate);
                    helpTooltipElement.classList.remove('hidden');
                };
                map.on('pointermove', pointerMoveHandler);
                map.getViewport().addEventListener('mouseout', function () {
                    helpTooltipElement.classList.add('hidden');
                });

                function addInteraction() {
                    draw = new ol.interaction.Draw({
                        source: source,
                        type: measureType === 'Box' ? 'Circle' : measureType,
                        geometryFunction: measureType === 'Box' ? ol.interaction.Draw.createBox() : undefined,
                        style: new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255, 255, 255, 0.2)'
                            }),
                            stroke: new ol.style.Stroke({
                                color: 'rgba(0, 0, 0, 0.5)',
                                lineDash: [10, 10],
                                width: 2
                            }),
                            image: new ol.style.Circle({
                                radius: 5,
                                stroke: new ol.style.Stroke({
                                    color: 'rgba(0, 0, 0, 0.7)'
                                }),
                                fill: new ol.style.Fill({
                                    color: 'rgba(255, 255, 255, 0.2)'
                                })
                            })
                        })
                    });
                    map.addInteraction(draw);
                    var listener;
                    draw.on(
                        'drawstart',
                        function (evt) {
                            sketch = evt.feature;
                            var tooltipCoord = evt.coordinate;
                            listener = sketch.getGeometry().on('change', function (evt) {
                                var geom = evt.target;
                                var output;
                                tooltipCoord = geom.getInteriorPoint().getCoordinates();
                            });
                        },
                        this
                    );

                    draw.on(
                        'drawend',
                        function (evt) {
                            sketch = null;
                            regionFeature = evt.feature;
                            ol.Observable.unByKey(listener);
                            map.removeInteraction(draw);
                            clearOverLayersById(map, 'helpTooltip');
                        },
                        this
                    );
                }
                function createHelpTooltip() {
                    if (helpTooltipElement) {
                        helpTooltipElement.parentNode.removeChild(helpTooltipElement);
                    }
                    helpTooltipElement = document.createElement('div');
                    helpTooltipElement.className = 'ol-tooltip hidden';
                    helpTooltip = new ol.Overlay({
                        element: helpTooltipElement,
                        offset: [15, 0],
                        id: 'helpTooltip',
                        positioning: 'center-left'
                    });
                    map.addOverlay(helpTooltip);
                }

                map.removeInteraction(draw);
                addInteraction();
            }

            function clearOverLayersById(map, id) {
                var toRemoveItem = [];
                map.getOverlays().forEach(function (item) {
                    if (item && item.id && item.id === id) {
                        toRemoveItem.push(item);
                    }
                });
                toRemoveItem.forEach(function (item) {
                    map.getOverlays().remove(item);
                });
            }

            //清空多边形矩形检索绘制的图形
            function clearSearchRegion() {
                var searchRegionLayer = getLayerById(searchRegionLayerID);
                searchRegionLayer && searchRegionLayer.getSource().clear();
            }

            function showSearchItemTile(layerID, name) {
                // 眼睛颜色变化
                var isShow = showOrCloseEye(layerID);
                if (!isShow) {
                    removeSearchItemTile(layerID);
                } else {
                    map.addLayer(
                        new ol.layer.Tile({
                            id: layerID,
                            zIndex: 90,
                            source: new ol.source.ImageTileSuperMapRest({
                                url: root,
                                projection: projection,
                                names: [name],
                                collectionId
                            })
                        })
                    );
                    itemLayers.push(layerID);
                }
            }

            function queryFromDataService(url) {
                var result = [];
                var sqlParam = new ol.supermap.GetFeaturesBySQLParameters({
                    queryParameter: { attributeFilter: "PAC Like '46%'" },
                    datasetNames: ['China:City_R'],
                    targetPrj: { epsgCode: 4326 },
                    maxFeatures: 10000
                });
                new ol.supermap.FeatureService(url).getFeaturesBySQL(sqlParam, function (serviceResult) {
                    var featureResults = serviceResult.result;
                    if (featureResults) {
                        var features = featureResults.features;
                        features.features.forEach(function (feature) {
                            var item = {
                                value: feature['properties']['NAME'],
                                label: feature['properties']['NAME'],
                                feature
                            };
                            result.push(item);
                        });
                    }
                    appendOptions('provinces', result, 'value', 'label');
                    widgets.loader.removeLoader();
                    provinces = result;
                    return result;
                });
            }

            function removeSearchItemTile(layerID) {
                removeLayer(map, layerID);
                itemLayers.splice(itemLayers.indexOf(layerID), 1);
            }

            function removeLayer(map, layerID) {
                var layer = getLayerById(layerID);
                if (layer) {
                    map.removeLayer(layer);
                }
            }

            function removeAllSearchItem() {
                itemLayers.forEach(function (layerID) {
                    removeLayer(map, layerID);
                });
                removeLayer(map, searchBoxLayerID);
            }

            function getLayerById(layerID) {
                var layers = map.getLayers().getArray();
                for (var i = 0; i < layers.length; i++) {
                    var layer = layers[i];
                    if (layer.get('id') === layerID) {
                        return layer;
                    }
                }
            }

            function getPolygonCenter(polygon) {
                var centerOfMass = turf.centerOfMass(polygon);
                return centerOfMass.geometry.coordinates;
            }

            function clearSearchResult(reset) {
                $('.page').hide();
                $('tbody').empty();
                $('#pagination').empty();
                removeAllSearchItem();
                if (reset) {
                    removeLayer(map, searchRegionLayerID);
                    provinceId = -1;
                    provinceBbox = null;
                    regionFeature = null;
                    $('#provinces').val(provinceId);
                }
                itemLayers = [];
                features = [];
            }

            function appendOptions(id, data, key, value) {
                data.forEach(function (item) {
                    $('#' + id).append('<option value=' + item[key] + '>' + item[value] + '</option}');
                });
            }

            function appendTable(features) {
                $('#collectionsTbody').empty();
                var tbodyHtml = '';
                features.forEach(function (feature, index) {
                    tbodyHtml +=
                        '<tr>' +
                        '<td>' +
                        feature.id +
                        '</td>' +
                        '<td onclick="showTifInfo(' +
                        "'" +
                        feature.id +
                        "'" +
                        ')" data-toggle="modal" data-target="#myModal"><a href="#">' +
                        feature.properties.smfilename +
                        '</a></td>' +
                        '<td>' +
                        feature.properties.addtime +
                        '</td>' +
                        '<td>' +
                        '<span id="' +
                        feature.id +
                        '" class="glyphicon glyphicon-eye-closed glyphicon-eye-open" aria-hidden="true" onclick="showSearchItemTile(' +
                        "'" +
                        feature.id +
                        "'" +
                        ',' +
                        "'" +
                        feature.properties.smfilename +
                        "'" +
                        ')"></span>' +
                        '</td>' +
                        '</tr>';
                });
                $('#collectionsTbody').append(tbodyHtml);
            }

            function appendPage(features) {
                $('#pagination').empty();
                var pageHtml =
                    '<li id="previous-page" class="disabled" onclick="goPrevious()">' +
                    '<a href="#" aria-label="Previous">' +
                    '<span aria-hidden="true">&laquo;</span>' +
                    '</a>' +
                    '</li>';
                for (var i = 1; i <= Math.ceil(features.length / pageMax) && i < pageMax; i++) {
                    var pageIndex = i - 1;
                    pageHtml += '<li onclick="clickPage(' + pageIndex + ')"><a href="#">' + i + '</a></li>';
                }
                pageHtml +=
                    '<li id="next-page" style="margin-right: 0">' +
                    '<a href="#" aria-label="Next" onclick="goNext()">' +
                    '<span aria-hidden="true">&raquo;</span>' +
                    '</a>' +
                    '</li>';
                $('#pagination').append(pageHtml);
                $('.page').show();
                $($('#pagination').children('li').get(1)).addClass('active');
            }

            function showTifInfo(featureId) {
                var feature;
                features.forEach(function (item) {
                    if (item.id === featureId) {
                        feature = item;
                    }
                });
                var title = '影像' + feature.id + '详情';
                var properties = feature.properties;
                var tbodyHtml = '';
                var thHtml = '';
                $('#myModalContent').empty();
                for (var key in properties) {
                    if (thHtml) {
                        tbodyHtml +=
                            '<tr class="modal-content-row">' +
                            thHtml +
                            '<th class="modal-content-item-label">' +
                            key +
                            '</th><td class="modal-content-item-content">' +
                            properties[key] +
                            '</td></tr>';
                        thHtml = '';
                    } else {
                        thHtml =
                            '<th class="modal-content-item-label">' +
                            key +
                            '</th><td class="modal-content-item-content">' +
                            properties[key] +
                            '</td>';
                    }
                }
                document.getElementById('myModalLabel').innerHTML = title;
                $('#myModalContent').append(tbodyHtml);
            }

            function clickPage(i) {
                currentIndex = parseInt(i);
                var start = tableMax * currentIndex;
                $($('#pagination').children('.active')).removeClass('active');
                $(
                    $('#pagination')
                        .children('li')
                        .get(i + 1)
                ).addClass('active');
                pageDisable();
                appendTable(features.slice(start, start + tableMax));
            }

            function goPrevious() {
                if (currentIndex >= 1) {
                    currentIndex -= 1;
                    clickPage(currentIndex);
                }
                pageDisable();
            }

            function goNext() {
                pageDisable();
                if (currentIndex + 1 < Math.ceil(features.length / pageMax)) {
                    currentIndex += 1;
                    clickPage(currentIndex);
                }
            }

            function pageDisable() {
                if (currentIndex === 0) {
                    $('#previous-page').addClass('disabled');
                } else {
                    $('#previous-page').removeClass('disabled');
                }
                if (currentIndex === Math.ceil(features.length / pageMax) - 1) {
                    $('#next-page').addClass('disabled');
                } else {
                    $('#next-page').removeClass('disabled');
                }
            }

            function collapseTable() {
                $('#collapseTwo').addClass('in');
            }

            function showOrCloseEye(featureId) {
                var closeClass = 'glyphicon-eye-closed';
                var el = document.getElementById(featureId);
                var classValues = $(el).attr('class');
                if (classValues.includes(closeClass)) {
                    $(el).removeClass(closeClass);
                    return true;
                } else {
                    $(el).addClass(closeClass);
                    return false;
                }
            }

            function selectCollection() {
                collectionId = getSelectedValue('collections');
            }

            function selectProvince() {
                clearSearchResult();
                provinceId = getSelectedValue('provinces');
                var item;
                for (var i = 0; i < provinces.length; i++) {
                    var province = provinces[i];
                    if (province.value === provinceId) {
                        item = province;
                        break;
                    }
                }
                provinceBbox = turf.bbox(item.feature.geometry);
                addProvinceLayer(item.feature, searchRegionLayerID);
            }

            function getSelectedValue(id) {
                var el = document.getElementById(id);
                var selIndex = el.selectedIndex; //获取当前选择的选项的index值
                var value = el.options[selIndex].value; //获取当前选择项的值
                return value;
            }

            function query() {
                clearSearchResult();
                var postData = {};
                if (provinceId != -1) {
                    postData['bbox'] = provinceBbox;
                }
                if (collectionId != -1) {
                    postData.collections = [collectionId];
                }
                if (regionFeature) {
                    postData['bbox'] = regionFeature.getGeometry().getExtent();
                }
                ImageSearchService(postData);
            }
        </script>
    </body>
</html>
